<template>
  <div class="page header-left">
    <base-header :leftIcon="null" title="我的"></base-header>

    <div class="p-20 rel">
      <div class="flex flex-center mb-80">
        <div
          class="inline"
          style="border-radius: 50%; border: 4rpx solid white"
        >
          <u-avatar icon="red-packet-fill" size="70" fontSize="40"></u-avatar>
        </div>
      </div>

      <div class="lh-2">
        <div>
          <span class="cl-basic">账号：</span>
          <span>白色风车</span>
        </div>

        <div>
          <span class="cl-basic">手机号：</span>
          <span>13070273424</span>
        </div>
      </div>
    </div>

    <div class="footer p-20">
      <u-button type="primary" shape="circle" plain @click="logout">
        <span class="fz-16" style="letter-spacing: 10rpx">退出小程序</span>
      </u-button>
    </div>

    <div class="footer bd-top"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  onLoad() {},

  methods: {
    logout() {
      uni.showModal({
        title: "提示",
        content: "确认需要退出登录吗？",
        success: (res) => {
          if (res.confirm) {
            uni.removeStorageSync("token");

            uni.reLaunch({
              url: "/pages/user/login",
            });
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding-top: calc(var(--status-bar-height) + var(--window-top));

  &::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(400rpx + var(--status-bar-height) + var(--window-top));
    background: linear-gradient(to bottom, #3b85c9, #1260a8);
    z-index: -1;
  }

  ::v-deep .u-navbar {
    .u-navbar__content {
      background-color: transparent !important;
    }
  }
}
</style>
